<template>
	<u18overlay>
	<view class="ssqPicker">
		<view class="operate">
			<view class="cancel" style="color:#ccc;" @click="cancel">
				取消
			</view>
			<view class="confirm" style="color:royalblue;" @click="confirm">
				确定
			</view>
		</view>
		<view class="content">
		<view class="province">
			<view class="item" v-for="item in objKeys" @click="selectP(item)" :style="pKey==item?{color:'#a2bd53',fontWeight:'bold'}:{}">
				{{data['86'][item]}}
				<text v-if="pKey==item">✔</text>
			</view>
		</view>
		<view class="city">
			<view class="" v-if="!pKey">
				
			</view>
			<view class="item" v-for="item in Object.keys(data[pKey])" @click="selectC(item)" v-else :style="cKey==item?{color:'#a2bd53',fontWeight:'bold'}:{}">
				{{data[pKey][item]}}
				<text v-if="cKey==item">✔</text>
			</view>
		</view>
		<view class="area">
			<view class="" v-if="!cKey">
				
			</view>
			<view class="item" v-for="item in Object.keys(data[cKey])" @click="selectA(item)" v-else :style="aKey==item?{color:'#a2bd53',fontWeight:'bold'}:{}">
				{{data[cKey][item]}}
				<text v-if="aKey==item">✔</text>
			</view>
		</view>
	</view>
	</view>
	</u18overlay>
</template>

<script setup>
	import {ref} from 'vue'
	import ssqData from './ssq.js'
	import u18overlay from './18overlay.vue'
	const emit = defineEmits({
		handlerCancel:(e)=>{},
		handlerConfirm:(e)=>{}
	})
	const data = ref(ssqData.ssq)
	const pKey = ref(null)
	const cKey = ref(null)
	const aKey = ref(null)
	const objKeys = Object.keys(ssqData.ssq['86'])
	function initCity(){
		cKey.value = null
		aKey.value = null
	}
	function initArea(){
		aKey.value = null
	}
	function selectP(item){
		initCity()
		pKey.value = item
	}
	function selectC(item){
		initArea()
		cKey.value = item
	}
	function selectA(item){
		aKey.value = item
	}
	function cancel(){
		emit('handlerCancel')
	}
	function confirm(){
		emit('handlerConfirm',[data.value['86'][pKey.value],
		data.value[pKey.value][cKey.value],data.value[cKey.value][aKey.value]])
	}
</script>

<style lang="scss">
	.ssqPicker{
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		height:50vh;
		background:#f8f8f8;
		.content,.operate{
			display:flex;
		}
		.operate{
			justify-content: space-between;
			height:6vh;
			background:#f8f8f8;
			line-height:6vh;
			padding:0 85rpx;
			border-bottom: 1px solid #f0f0f0;
		}
	}
	.province,.city,.area{
		flex:1;
		height:42vh;
		margin:1vh 0;
		text-align:center;
		overflow: auto;
		&>.item{
			padding:20rpx 0;
			// border-bottom:2rpx solid #ccc;
			background: #f8f8f8;
		}
	}
</style>